<template>
  <div>
    <div class="inputInfo">
      <div class="rel">
        <div class="ssll">
            <div class="ssll1">
                <div class="sl01">
                    <div class="sl02">{{totalRevenue}}</div>
                    <div class="sl03">总收益</div>
                </div>
                <div class="sl01">
                    <div class="sl02">{{undrawn}}</div>
                    <div class="sl03">待提现</div>
                </div>
                <div class="sl01">
                    <div class="sl02">{{drawn}}</div>
                    <div class="sl03">已提现</div>
                </div>
            </div>
            <div class="txx">
                <div class="txbut1">
                  <div class="uuuimg"><img style="width:40px;height:30px;" :src="userImgType"/>
                  
                  </div>
                  <div class="uuu">{{ userType }}</div>
                </div>
                <div class="txbut" @click="withDrawn()">提现</div>
            </div>
        </div>
        <div class="flushbut" >
            收益记录
        </div>
        <div v-if="records">
          <div class="findRecord"   v-for="(record, index) in records"  :key="index">
              <div class="abc">
                  <div class="recordImage">{{ record.rname }}</div>
                  <div class="recordName">{{ record.createTime }}</div>
                  <div class="recordInfo" >{{record.rfee}}元</div>
              </div>
          </div>  
        </div>
        <div v-else class="norevenue">
          还没有收益( ╯□╰ )
        </div>

        <div class="revenueMark">
          <h1>如何产生收益</h1><span>下级消费后系统与你实时结算佣金.佣金比例参考"普通用户收益/代理商用户收益"</span><br><br>

          <h1>获取下级</h1><span>A用户扫描B用户的二维码(或者核查B用户),则A用户成为B用户的下级;点击菜单"我的二维码"获取</span><br><br>         

          <h1>普通用户收益</h1><span>下级用户消费金额的20%.(示例：下级消费10元*20%=2元,即收益2元;所有下级累计消费5000元,即收益1000元)</span><br><br>
        
          <h1>代理商用户收益</h1> <span>下级用户消费金额的90%.(示例：下级消费10元*90%=9元,即收益9元;所有下级累计消费5000元,即收益4500元)</span><br><br>
          
          <h1>代理商优势</h1><span>1:代理商可永久免费使用核查功能<br>2:普通佣金20%,代理商佣金高达90%<br>3:下级加盟介绍费20%<br>4:享受平台分红</span>
                  
          <h1>如何成为代理商</h1><span>点击 </span><span class="disss" @click="getVisitCode()">我要成为代理</span><br>
          
          <h1>提现</h1> <span>7个工作日内到账(微信零钱)</span><br><br>
        </div>
      </div>
    </div>

    <div :style="{width:'100%', height:'35px'}"></div>

  </div>
</template>

<script>
import card from '@/components/card'
import { requestPost, formatDate } from '@/utils/index'
export default {
  components: {
    card
  },
  data () {
    return {
      records: [],
      limit: 20,
      pageSize: 1,
      totalRevenue: '-',
      undrawn: '-',
      drawn: '-',
      userImgType: '/static/images/hg1.png',
      userType: '普通用户'
    }
  },
  onLoad () {},
  onReachBottom () {
    this.pageSize = this.pageSize + 1
    this.getRecords()
  },
  onShow () {
    this.records = []
    this.pageSize = 1
    this.getRecords()
    this.getRevenue()
  },
  onUnload () {
    this.totalRevenue = '-'
    this.undrawn = '-'
    this.drawn = '-'
    this.userImgType = '/static/images/hg1.png'
    this.userType = '普通用户'
    this.pageSize = 1
    this.records = []
  },
  methods: {
    gopage (pathstr) {
      wx.navigateTo({
        url: pathstr
      })
    },
    showMyToast (title, duration, mask) {
      wx.showToast({
        title: title,
        icon: 'none',
        duration: duration,
        mask: mask
      })
    },
    withDrawn () {
      var that = this
      var data = {
        'userId': mpvue.getStorageSync('userId'),
        'token': mpvue.getStorageSync('token')
      }
      requestPost(mpvue.getStorageSync('requestUrl') + '/miniprogram/userWithDrawn', data, 'POST').then(function (value) {
        if (value.code === 0) {
          that.undrawn = '0'
          that.showMyToast('提现成功', 2000, false)
        } else {
          that.showMyToast(value.message, 2000, false)
        }
      }, function (value) {
        that.showMyToast(value, 2000, false)
      })
    },
    getRevenue () {
      var that = this
      var data = {
        'userId': mpvue.getStorageSync('userId'),
        'token': mpvue.getStorageSync('token')
      }
      requestPost(mpvue.getStorageSync('requestUrl') + '/miniprogram/userRevenue', data, 'POST').then(function (value) {
        if (value.code === 0) {
          that.totalRevenue = value.data.totalRevenue
          that.undrawn = value.data.undrawn
          that.drawn = value.data.drawn
          if (value.data.isAgent === 1) {
            that.userImgType = '/static/images/hg2.png'
            that.userType = '代理商'
          }
          if (value.data.isAgent === 0) {
            that.userImgType = '/static/images/hg1.png'
            that.userType = '普通用户'
          }
        }
      }, function (value) {
        console.log(value)
      })
    },
    getRecords () {
      var data = {
        'userId': mpvue.getStorageSync('userId'),
        'page': this.pageSize,
        'limit': this.limit,
        'token': mpvue.getStorageSync('token')
      }
      var that = this
      requestPost(mpvue.getStorageSync('requestUrl') + '/miniprogram/myRevenues', data, 'POST').then(function (value) {
        if (value.code === 0) {
          if (value.data.length === 0) {
            that.showMyToast('暂无收益记录', 2000, false)
            // return
          } else {
            for (var ele of value.data) {
              ele.createTime = formatDate(ele.createTime)
              that.records.push(ele)
            }
          }
        } else {
          that.showMyToast(value.message, 2000, false)
        }
      }, function (value) {
        console.log(value)
      })
    },
    getVisitCode () {
      if (!wx.getStorageSync('co')) {
        this.showMyToast('恭喜您已成为代理', 2000, false)
        return
      }
      var data = {
        'userId': mpvue.getStorageSync('userId'),
        'token': mpvue.getStorageSync('token')
      }
      var that = this
      var url = mpvue.getStorageSync('requestUrl') + '/miniprogram/visitCode'
      requestPost(url, data, 'POST').then(function (value) {
        if (value.code === 0) {
          wx.showModal({
            title: '是否成为代理商',
            content: '代理商佣金高达90%',
            success (res) {
              if (res.confirm) {
                console.log('用户点击确定')
                var data = {
                  'type': '3',
                  'userId': mpvue.getStorageSync('userId'),
                  'token': mpvue.getStorageSync('token')
                }
                requestPost(mpvue.getStorageSync('requestUrl') + '/wxPay/unifiedOrder', data, 'POST').then(function (value) {
                  if (value.code === 0) {
                    wx.requestPayment({
                      timeStamp: value.data.timeStamp,
                      nonceStr: value.data.nonceStr,
                      package: value.data.package,
                      signType: value.data.signType,
                      paySign: value.data.paySign,
                      success (res) {
                        that.showMyToast('支付成功', 2000, false)
                      },
                      fail (res) {
                        console.log('支付失败')
                      }
                    })
                  }
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        } else if (value.code === 200041) {
          that.showMyToast('您已是代理商', 2000, false)
        } else if (value.code === 200032) {
          that.showMyToast('您还未人脸核身', 2000, false)
        } else {
          that.showMyToast('支付成功', 2000, false)
        }
      }, function (value) {
        console.log(value.message)
      })
    }
  }
}
</script>

<style scoped>
.disss{
  font-size: 15px;
  color: rgb(101, 136, 250);
  text-align: right;
  text-decoration: underline;
  font-style: italic;
}
h1{
  font-weight: bold;
  margin-top:10px;
}
.flushbut{
  width: 90%;
  height: 35px;
  margin: 0 auto;
  color:rgb(167, 167, 167);
}
.rel{
  margin-top: 0px;
  width: 100%;
  clear: both;
}
.bg{
  padding-top:10px;
}
.inputInfo{
  width: 100%;
  height: 150px;
  float:left;
}

.recordImage{
  width: 20%;
  float: left;
}
.recordName{
  width: 50%;
  float: left;
}
.recordInfo{
  width: 30%;
  float: left;
  font-weight: bold;
}
.findRecord{
  width: 100%;
}
.abc{
    margin: 0 auto;
    width: 90%;
    border-bottom:1px rgb(192, 192, 192) solid;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
}
.ssll{
    background-image: url("http://106.55.147.43/jcimg/mbj.png");
    width: 90%;
    height: 150px;
    background-size: cover;
    border-radius: 5px 5px 5px 5px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
.ssll1{
    width: 100%;
    height: 70px;
    float: left;
}
.sl01{
    width:33%;
    height: 70px;
    float: left;
    
}
.sl02{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    float: left;
    color:rgb(255, 2, 2);
    font-size: 18px;
}
.sl03{
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    float: left;
    font-size: 15px;
}
.txx{
    width: 100%;
    height: 80px;
    float: left;
    text-align: center;
}
.txbut{
    width: 45%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    float: right;
    margin-top:20px;
    background-color: #FEF55A;
    border-radius: 10px 0px 0px 10px;
}

.txbut1{
    width: 40%;
    height: 80px;
    text-align: center;
    float: left;
    margin-top:0px;
    border-radius: 5px 5px 5px 5px;
}
.uuu{
  width: 100%;
  height: 30px;
  font-size: 12px;
  float: left;
  font-weight: bold;
}
.uuuimg{
  width:100%;
  height: 50px;
  float: left;
  line-height: 80px;

}
.norevenue{
  width: 90%;
  height: 150px;
  line-height: 150px;
  font-size: 30px;
  margin: 0 auto;
  text-align: center;
  background-color: rgb(238, 238, 238);
  color:rgb(182, 182, 182);
}
.revenueMark{
  width: 90%;
  font-size: 16px;
  margin: 0 auto;
  color:rgb(182, 182, 182);
}
</style>
